<template>
    <a-menu style="width: 200px;height: 100%;" breakpoint="xl" v-model:selected-keys="selectedKeys">
        <a-menu-item key="/home">
            <template #icon>
                <icon-home/>
            </template>
            主页
        </a-menu-item>
        <a-menu-item key="/todo">
            <template #icon>
                <icon-check-square/>
            </template>
            待办
        </a-menu-item>
        <a-sub-menu key="/graph">
            <template #icon>
                <icon-mind-mapping/>
            </template>
            <template #title>图</template>
            <a-menu-item key="/graph/search">
                搜索内容
            </a-menu-item>
            <a-menu-item key="/graph/recycle">
                回收站
            </a-menu-item>
            <a-menu-item key="/graph/relation">
                关联图
            </a-menu-item>
            <a-menu-item key="/graph/category">
                分类图
            </a-menu-item>
            <a-menu-item key="/graph/timeline">
                时间线
            </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="/setting">
            <template #icon>
                <icon-settings/>
            </template>
            <template #title>设置</template>
            <a-menu-item key="/setting/base">
                基础设置
            </a-menu-item>
            <a-menu-item key="/setting/theme">
                主题设置
            </a-menu-item>
            <a-menu-item key="/setting/lsky-pro">
                兰空图床
            </a-menu-item>
            <a-menu-item key="/setting/category">
                分类设置
            </a-menu-item>
            <a-menu-item key="/setting/feature">
                关键字设置
            </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="/more">
            <template #icon>
                <icon-more/>
            </template>
            <template #title>更多</template>
            <a-menu-item key="/more/backup">
                <template #icon>
                    <icon-sync/>
                </template>
                备份
            </a-menu-item>
            <a-menu-item key="/more/attachment" v-if="useAttachment">
                <template #icon>
                    <icon-attachment/>
                </template>
                附件
            </a-menu-item>
            <a-menu-item key="/more/recommend">
                <template #icon>
                    <icon-thumb-up/>
                </template>
                推荐
            </a-menu-item>
            <!--            <a-menu-item key="/more/vip">-->
            <!--                <template #icon>-->
            <!--                    <icon-fire />-->
            <!--                </template>-->
            <!--                高级版-->
            <!--            </a-menu-item>-->
            <a-menu-item key="/more/update">
                <template #icon>
                    <icon-time-line/>
                </template>
                更新
            </a-menu-item>
            <a-menu-item key="/more/about">
                <template #icon>
                    <icon-exclamation-circle/>
                </template>
                关于
            </a-menu-item>
        </a-sub-menu>
    </a-menu>
    <div class="app-exit">
        <a-dropdown position="tl">
            <a-button type="text">
                <template #icon>
                    <icon-palette/>
                </template>
            </a-button>
            <template #content>
                <a-doption @click="useGlobalStore().switchDarkColors(GlobalType.DARK)">
                    <template #icon>
                        <icon-moon/>
                    </template>
                    暗黑
                </a-doption>
                <a-doption @click="useGlobalStore().switchDarkColors(GlobalType.LIGHT)">
                    <template #icon>
                        <icon-sun/>
                    </template>
                    明亮
                </a-doption>
                <a-doption @click="useGlobalStore().switchDarkColors(GlobalType.AUTO)">
                    跟随系统
                </a-doption>
            </template>
        </a-dropdown>
    </div>
</template>
<script lang="ts" setup>
import IconTimeLine from "@/icon/IconTimeLine.vue";
import {computed, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {GlobalType, useGlobalStore} from "@/store/GlobalStore";
import {isUtools} from "@/global/BeanFactory";
import Constant from "@/global/Constant";
import PlatformTypeEnum from "@/enumeration/PlatformTypeEnum";

const route = useRoute();
const router = useRouter();

const selectedKeys = ref(['/dashboard']);

const isDark = computed(() => useGlobalStore().isDark);

watch(() => selectedKeys.value, value => router.push(value[0]));
watch(() => route.path, path => {
    if (selectedKeys.value[0] !== path) {
        selectedKeys.value[0] = path;
    }
});

const useAttachment = computed(() => isUtools && Constant.platform === PlatformTypeEnum.UTOOLS);

</script>
<style scoped>
.app-exit {
    position: absolute;
    left: 8px;
    bottom: 8px;
}
</style>
